<template>
    <div id="downloadQrCode">
        <!-- <div class="title">{{pageTitle}}</div> -->
        <div class="currentTemp">
            <div class="left">
                <span>当前选择的模版：</span>
            </div>
            <div class="right" v-if="Object.keys(qrCodeParams).length > 0">
                <!-- <span>打印{{qrCodeDetails.tempName}}<span style="margin-left:15px;">{{qrCodeDetails.size}}</span></span> -->
                <qrcodeTemplate :index="qrCodeParams.qr_type" :logoIMG="qrCodeParams.logo_url" :status="qrCodeParams.is_show"/>
            </div>
        </div>
        <div class="selectClass">
            <div class="left">
                <span>按资产分类下载：</span>
            </div>
            <div class="right">
                <div class="select">
                        <el-select v-model="propertyParmas" placeholder="请选择" @change="propertyChange">
                            <el-option-group
                            v-for="(item,index) in assetList"
                            :key="index"
                            :label="item.category_name">
                            <el-option
                                v-for="items in item.cate"
                                :key="items.id"
                                :label="items.category_name"
                                :value="[items.id,items.category_name]">
                            </el-option>
                            </el-option-group>
                        </el-select>
                        <el-button type="primary" class="btn" @click="createQrCode">生成二维码</el-button>
                </div>
                <div class="text" v-show="propertytext">{{propertytext}}</div>
                <el-table
                :data="qrCodeMission"
                border
                :header-cell-class-name="tabelHeaderClassFn"
                style="width: 100%;margin-top:21px;">
                    <el-table-column
                    label="序号"
                    type="index"
                    align="center"
                    header-align="center"
                    width="60">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        header-align="center"
                        prop="create_time"
                        label="生成时间">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        header-align="center"
                        prop="qt_cate_name"
                        label="资产分类">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        header-align="center"
                        prop="qt_asset_num"
                        label="资产数量">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        header-align="center"
                        prop="qt_status"
                        label="状态">
                        <template slot-scope="scope">
                            {{scope.row.qt_status | qt_statusStr}} {{!scope.row.qt_status && scope.row.startTime && scope.row.endTime?`预计需要${Number(scope.row.startTime) ==0 ? '':scope.row.startTime+'-'}${scope.row.endTime}分钟`:''}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        header-align="center"
                        prop="date"
                        label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="downloadFile(scope.row.qt_file_url)" v-show="scope.row.qt_status">点击下载</el-button>
                                <el-button type="text" @click="getQrcodeListInit" v-show="!scope.row.qt_status">点击刷新</el-button>
                            </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <progressLoad :isShow="progressIsShow" :progress="progress" :types="progressType" @close="progressClose" :predictTime="predictTime"/>
    </div>
</template>

<script>
    import { getQrcodeType , getPropertyList ,setPropertyCateCount,downloadQrCode,getQrcodeList } from "./api"
    import qrcodeTemplate from '@/components/qrCodeMain/qrCodeTemplate'
    import progressLoad from '@/components/qrCodeMain/progressLoad'
    import {getNowTime} from '@/libs/utils.js'
import { setInterval, setTimeout } from 'timers';
    export default {
        components:{qrcodeTemplate,progressLoad},
        props:{
            title:String
        },
        created () {
           this.getQrCodeParams()
           this.getPropertyParams()
           // 获取初始生成文件状态 
           this.getQrcodeListInit()
        },
        computed:{
            pageTitle(){
                return this.title
            }
        },
        watch:{
            '$store.state.warehouseOfAssetsManager'(newData,old){
                this.getQrCodeParams()
                this.getPropertyParams()
                // 获取初始生成文件状态 
                this.getQrcodeListInit()
            }
        },
        data(){
            return{
                qrCodeDetails:{}, //二维码模块参数
                qrCodeParams:[], //二维码系统参数
                assetList:[], //资产分类列表
                propertyCount:0, //资产分类下的子分类个数
                propertyParmas:[],//选中资产分类参数
                propertytext:'',//选中资产下所有子分类文案
                progressIsShow:false,// 进度条状态
                progress:0,// 进度条进度
                progressType:'',//使用进度的类别
                setTimeoutID:{}, //定时器ID
                predictTime:{}, //生成二维码预计时间
                qrCodeMission:[]//生成任务数据
            }
        },
        methods:{
            tabelHeaderClassFn({row, column, rowIndex, columnIndex}){
                return "tabel_Header_Class"
            },
            //获取生成二维码列表
            getQrcodeListInit(){
                  getQrcodeList({wh_id:this.$store.state.warehouseOfAssetsManager})
                  .then((res)=>{
                        if(res.length > 0){
                           let num = res.length > 15 ? 15 : res.length - 1
                           this.qrCodeMission= res.slice(0,num)
                        }
                        for(let i=0;i<this.qrCodeMission.length;i++){
                            let singleTime = 22 / 100
                            let time = this.qrCodeMission[i].qt_asset_num * singleTime.toFixed(2)
                            // let SPTime = time / 100  * 1000
                            let startTime = (time / 60).toFixed(1)
                            let endTime = Number(startTime) + 0.5
                            this.predictTime = {startTime,endTime}
                            this.qrCodeMission[i] = {
                                ...this.qrCodeMission[i],
                                qt_status:this.qrCodeMission[i].qt_status == 2,
                                startTime,
                                endTime
                            }
                            if(i == 0 && !this.qrCodeMission[i].qt_status){
                                clearTimeout(this.setTimeoutID._id)
                                this.setTimeoutID = setTimeout(()=>{
                                        this.getQrcodeListInit()
                                },(time + 5) * 1000)
                            }else if(i == 0 && this.qrCodeMission[i].qt_status){
                                if(Object.keys(this.setTimeoutID).length > 0){
                                    clearTimeout(this.setTimeoutID._id)
                                }
                            }
                        }

                        console.log(this.qrCodeMission,'this.qrCodeMission')

                        // this.qrCodeMission= res.length >= 1 ? res[0] : {}
                        // if(Object.keys(this.qrCodeMission).length > 0){
                        //     let singleTime = 22 / 100
                        //     let time = this.qrCodeMission.qt_asset_num * singleTime.toFixed(2)
                        //     // let SPTime = time / 100  * 1000
                        //     let startTime = (time / 60).toFixed(1)
                        //     let endTime = Number(startTime) + 0.5
                        //     this.predictTime = {startTime,endTime}
                        //     this.qrCodeMission = {
                        //         ...this.qrCodeMission,
                        //         qt_status:this.qrCodeMission.qt_status == 2,
                        //         startTime,
                        //         endTime
                        //     }
                        //     if(!this.qrCodeMission.qt_status){
                        //        this.setTimeoutID = setTimeout(()=>{
                        //             this.getQrcodeListInit()
                        //         },(time + 5) * 1000)
                        //     }else{
                        //         if(Object.keys(this.setTimeoutID).length > 0){
                        //             clearTimeout(this.setTimeoutID._id)
                        //         }
                        //     }
                        // }
                  })
            },
            // 关闭二维码
            progressClose(){

            },
            // 生成二维码
            createQrCode(){
                if(this.propertyParmas.length == 0){
                    this.$message({
                        showClose: true,
                        message: '需要下载的资产分类不能为空',
                        type: 'warning'
                    });
                    return false
                }
                this.clickDownloadQrCode()
            },
            // 生成二维码
            clickDownloadQrCode(){
                let params = {
                    wh_id:this.$store.state.warehouseOfAssetsManager,
                    download_type:2,
                    f_cid:this.propertyParmas[0],
                    number:this.propertyCount
                }
                downloadQrCode(params)
                .then(res=>{
                    this.getQrcodeListInit()

                    // 储存URL或者请求接口获取URL
                    //  this.downloadFile(res.qrcode_pdf_url)
                })
            },
            downloadFile(url){
                let that = this
                this.dd.biz.util.downloadFile({
                        url, 
                        name: `${this.propertyParmas[1]}资产二维码.pdf`,
                        onProgress: function(msg){
                            if(msg.progress && msg.progress < 100){
                                that.progressIsShow = true
                                that.progress = msg.progress
                            }else{
                                 that.progressIsShow = false
                                 that.progress = 0
                            }
                        },
                        onSuccess : function(result) {
                            that.progressIsShow = false
                        },
                        onFail : function() {}
                    })
            },
            //选择资产ID
            propertyChange(params){
                setPropertyCateCount({wh_id:this.$store.state.warehouseOfAssetsManager,f_cid:this.propertyParmas[0]})
               .then((res)=>{
                   this.propertyCount = res.count
                   this.propertytext = `您选择了 ${this.propertyParmas[1]} 分类，合计${res.count}个资产！`
               })
            },
            // 获取资产列表
            getPropertyParams(){
               getPropertyList({wh_id:this.$store.state.warehouseOfAssetsManager,category_type:'2'})
                .then((res)=>{
                    this.assetList = res
                })
            },
            // 获取二维码模版默认参数
            getQrCodeParams(){
                getQrcodeType({wh_id:this.$store.state.warehouseOfAssetsManager})
                .then((res)=>{
                    if(res != null){
                       this.qrCodeParams = {
                           ...res,
                           qr_type:res.qr_type.toString(),
                           is_show:res.is_show == 1
                       }
                       this.qrCodeDetails = this.$store.state.qrCodeTpData[res.qr_type]
                    }
                })
            }
        },
        beforeDestroy(){
        },
        filters:{
            qt_statusStr(params){
                if(params){
                    return '已生成，请下载'
                }else{
                    return '正在生成中，请稍后刷新'
                }
            }
        }
    }
</script>

<style lang="scss">
#downloadQrCode{
   > .title{
       width:100%;
       height:27px;
       line-height:27px;
       font-weight:600;
       font-size:18px;
       color:#101010;
       padding:0 0 12px 13px;
       border-bottom:1px solid rgba(223, 223, 223, 1);
   }
   .currentTemp{
       padding: 0 0 0 13px;
       width: 100%;
       display: flex;
       > .left{
           width: 120px;
           >span{
               width:100%;
               display: block;
               height: 20px;
               line-height: 20px;
               color: rgba(16, 16, 16, 1);
               font-size: 14px;
           }
       }
       > .right{
           flex: 1;
        //    margin-left: 12px;
           >span{
               display: block;
               height: 20px;
               line-height: 20px;
               color: rgba(16, 16, 16, 1);
               font-size: 14px;
           }
       }
   }
   .selectClass{
       padding: 42px 0 0 13px;
       display: flex;
       > .left{
           width: 120px;
        //    margin-left: 12px;
           >span{
               width:100%;
               display: block;
               height: 27px;
               line-height: 27px;
               color: rgba(16, 16, 16, 1);
               font-size: 14px;
           }
       }
       > .right{
           flex: 1;
           .select{
                display: flex;
                align-items: center;
                .btn{
                    margin-left: 27px;
                }
           }
           .text{
               min-height: 90px;
               overflow: hidden;
               width: calc(100% - 100px);
               margin-top: 12px;
               background: #F7F7F7;
               padding: 10px 15px;
               color: #979797;
               font-size: 14px;
               line-height: 25px;
           }
           .mission{
               width: 100%;
               margin-top: 25px;
               font-size: 14px;
               color: #000;
               span{
                  color: #3196fa;
                  cursor: pointer;
               }
               i{
                   margin: 0 10px;
               }
           }

       }
   }
    #qrCodeTemplate .right .templateMain,
    #qrCodeTemplate .right .text,
    #qrCodeTemplate .left .templateMain,
    #qrCodeTemplate .left .text{
        margin: 17px 0 0 !important
    }
    .el-input--small .el-input__inner{
       height: 27px !important;
       width: 200px !important;
       line-height: 27px;
       padding-top: 5px;
   }
   .el-button--small, .el-button--small.is-round{
       padding: 0 8px !important;
       height: 23px;
       line-height: 23px;
   }
   .el-input--small .el-input__icon{
       line-height: 27px;
   }
   .left .templateMain,.right .templateMain{
       margin: 0 ;
    }
    .left .text,.left .text{
      margin: 15px 0 0 0;
    }
    .tabel_Header_Class{
        background-color:rgba(246, 246, 246, 1);
        color:#606266;
        font-size: 14px;
    }
}
</style>